<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>荣耀CG动画 - 首页</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js" defer></script>
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="header">
    <div class="header-container">
      <div class="logo">
        <a href="index.html">
          <img src="images/SLogo.png" alt="荣耀CG动画">
        </a>
      </div>
      <div class="search-box">
        <input type="text" placeholder="搜索游戏、赛事、CG动画...">
        <button class="search-btn">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- 底部导航栏 -->
  <nav class="bottom-nav">
    <a href="index.html" class="nav-item active">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="events.html" class="nav-item">
      <i class="fa fa-trophy"></i>
      <span>赛事</span>
    </a>
    <a href="cg.html" class="nav-item">
      <i class="fa fa-film"></i>
      <span>CG动画</span>
    </a>
    <a href="profile.html" class="nav-item">
      <i class="fa fa-user"></i>
      <span>个人中心</span>
    </a>
  </nav>

  <!-- 主内容区 -->
  <main class="main-content">
    <!-- 轮播图 -->
    <section class="hero-slider">
      <!-- 左右切换按钮 -->
      <button class="slider-btn prev-btn">
        <i class="fa fa-angle-left"></i>
      </button>
      <button class="slider-btn next-btn">
        <i class="fa fa-angle-right"></i>
      </button>
      
      <div class="slider-container">
        <div class="slide active">
          <img src="images/lun1.png" alt="王者荣耀最新CG">
          <div class="slide-content">
            <h3>王者荣耀 - 5V5</h3>
            <p>全新英雄CG动画，新英雄震撼登场</p>
            <button class="play-btn" data-video="王者荣耀 - 5V5">
          
            </button>
          </div>
        </div>
        <div class="slide">
          <img src="images/lun2.png" alt="和平精英年度CG">
          <div class="slide-content">
            <h3>和平精英 - 战场风云</h3>
            <p>年度大片，见证战场的残酷与荣耀</p>
            <button class="play-btn" data-video="和平精英 - 战场风云">
            
            </button>
          </div>
        </div>
        <div class="slide">
          <img src="images/lun3.png" alt="金铲铲之战新赛季">
          <div class="slide-content">
            <h3>金铲铲之战 - 霓虹之夜</h3>
            <p>新赛季预告片，霓虹都市的英雄传说</p>
            <button class="play-btn" data-video="金铲铲之战 - 霓虹之夜">
            
            </button>
          </div>
        </div>
      </div>
      <div class="slider-dots">
        <span class="dot active" data-index="0"></span>
        <span class="dot" data-index="1"></span>
        <span class="dot" data-index="2"></span>
      </div>
    </section>

    <!-- 游戏分类 -->
    <section class="game-categories">
      <h2 class="section-title">热门游戏</h2>
      <div class="category-container">
        <a href="#" class="category-item">
          <img src="images/logo.png" alt="王者荣耀">
          <span>王者荣耀</span>
        </a>
        <a href="#" class="category-item">
          <img src="images/logo2.png" alt="和平精英">
          <span>和平精英</span>
        </a>
        <a href="#" class="category-item">
          <img src="images/logo3.png" alt="金铲铲之战">
          <span>金铲铲之战</span>
        </a>
      </div>
    </section>

    <!-- 最新CG -->
    <section class="latest-cg">
      <h2 class="section-title">最新CG动画</h2>
      <div class="cg-container">
        <div class="cg-item" data-video="海诺与朵莉亚">
          <div class="video-thumb">
            <img src="images/cg1.png" alt="海诺与朵莉亚">
            <span class="duration">03:24</span>
          </div>
          <h3>王者荣耀 - 海诺与朵莉亚动画</h3>
          <p>海诺与朵莉亚的起源故事</p>
        </div>
        <div class="cg-item" data-video="和平精英 - 沙漠战场">
          <div class="video-thumb">
            <img src="images/cg2.png" alt="和平精英 - 沙漠战场">
            <span class="duration">02:56</span>
          </div>
          <h3>和平精英 - 沙漠战场</h3>
          <p>沙漠地图全新CG</p>
        </div>
        <div class="cg-item" data-video="金铲铲之战 - 新英雄">
          <div class="video-thumb">
            <img src="images/cg3.png" alt="金铲铲之战 - 新英雄">
            <span class="duration">01:48</span>
          </div>
          <h3>金铲铲之战 - 新英雄</h3>
          <p>霓虹之夜新英雄预告</p>
        </div>
        <div class="cg-item" data-video="王者荣耀 - 宫本武藏">
          <div class="video-thumb">
            <img src="images/cg4.png" alt="王者荣耀 - 宫本武藏">
            <span class="duration">03:12</span>
          </div>
          <h3>宫本武藏-阿通</h3>
          <p>宫本武藏故事</p>
        </div>
      </div>
    </section>

    <!-- 热门赛事 -->
    <section class="hot-events">
      <h2 class="section-title">热门赛事</h2>
      <div class="event-container">
        <div class="event-item">
          <img src="images/KPL.png" alt="KPL王者荣耀职业联赛">
          <div class="event-info">
            <h3>KPL王者荣耀职业联赛</h3>
            <p>2023春季赛总决赛</p>
            <span class="date">2023-05-20</span>
          </div>
        </div>
        <div class="event-item">
          <img src="images/PEL.png" alt="PEL和平精英职业联赛">
          <div class="event-info">
            <h3>PEL和平精英职业联赛</h3>
            <p>2023夏季赛决赛</p>
            <span class="date">2023-07-15</span>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 视频播放模态框 -->
  <div class="modal video-modal">
    <div class="modal-content video-content">
      <div class="modal-header">
        <h2 id="video-title">视频播放</h2>
        <button class="close-modal">&times;</button>
      </div>
      <div class="modal-body">
        <video id="video-player" controls>
          <source src="" type="video/mp4">
          您的浏览器不支持HTML5视频播放。
        </video>
      </div>
    </div>
  </div>
</body>
</html>
